<template>
	<view class="classify">
		<custom-nav-bar title="分类" />

		<view class="search" :style="{ top: getNavBarHeight() + 'px' }">
			<search title="现在搜索 — 美食名称" />
		</view>

		<view class="content">
			<view class="empty">
				<view class="empty-c"></view>
			</view>
			<view class="canteen-list">
				<view :class="{ recommend: true, active: selected === '00' }" @click="handleClick('00')">为你推荐</view>
				<!-- <view class='recommend'>为你推荐</view> -->
				<view class="list" v-for="(e, i) of canteenList" :key="e.name">
					<ul class="ul">
						<view @click="handleClick(i + 1 + '1')">{{ e.name }}</view>
						<li v-for="(child, index) of e.children" :key="child.id" @click="handleClick(child.id)" :class="{ li: true, active: selected === child.id }">
							{{ child.name }}
						</li>
					</ul>
				</view>
			</view>
			<view class="food-list">
				<theme-item v-for="(item,index) of foodList" :key="item.title+index" :item="item"></theme-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getNavBarHeight } from '@/utils/system.js';

const foods = [
	{
		url: '../../static/images/food1.jpg',
		title: '汉堡王 西餐快餐/汉堡',
		desc: '汉堡炸鸡都是现做的',
		price: '12',
		sold: '1024'
	},
	{
		url: '../../static/images/food2.jpg',
		title: '隆江猪脚饭 简餐快餐',
		desc: '猪脚饭做得好有味道',
		price: '12',
		sold: '1234'
	}
];
const foodList = ref(foods);

const selected = ref('00');

const canteens = [
	{
		name: '一食堂',
		children: [
			{ name: '一楼', id: '11' },
			{ name: '二楼', id: '12' },
			{ name: '三楼', id: '13' }
		]
	},
	{
		name: '二食堂',
		children: [
			{ name: '一楼', id: '21' },
			{ name: '二楼', id: '22' },
			{ name: '三楼', id: '23' }
		]
	}
];
const canteenList = ref(canteens);

let hisSelected = null;
const handleClick = (value) => {
	selected.value = value;
	if (selected.value === hisSelected) return;
	canteenList.value = canteens;
	hisSelected = selected;

	handleTab();
};

const handleTab = () => {
	if (selected.value === '00') {
		foodList.value = [
			{
				url: '../../static/images/food1.jpg',
				title: '汉堡王 西餐快餐/汉堡',
				desc: '汉堡炸鸡都是现做的',
				price: '12',
				sold: '1024'
			},
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			}
		];
	} else if (selected.value < '20') {
		foodList.value = [
			{
				url: '../../static/images/food1.jpg',
				title: '汉堡王 西餐快餐/汉堡',
				desc: '汉堡炸鸡都是现做的',
				price: '12',
				sold: '1024'
			},
			{
				url: '../../static/images/food1.jpg',
				title: '汉堡王 西餐快餐/汉堡',
				desc: '汉堡炸鸡都是现做的',
				price: '12',
				sold: '1024'
			},
			{
				url: '../../static/images/food1.jpg',
				title: '汉堡王 西餐快餐/汉堡',
				desc: '汉堡炸鸡都是现做的',
				price: '12',
				sold: '1024'
			},
			{
				url: '../../static/images/food1.jpg',
				title: '汉堡王 西餐快餐/汉堡',
				desc: '汉堡炸鸡都是现做的',
				price: '12',
				sold: '1024'
			},
			{
				url: '../../static/images/food1.jpg',
				title: '汉堡王 西餐快餐/汉堡',
				desc: '汉堡炸鸡都是现做的',
				price: '12',
				sold: '1024'
			}
		];
	} else {
		foodList.value = [
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			},
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			},
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			},
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			},
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			},
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			},
			{
				url: '../../static/images/food2.jpg',
				title: '隆江猪脚饭 简餐快餐',
				desc: '猪脚饭做得好有味道',
				price: '12',
				sold: '1234'
			}
		];
	}
};
// console.log(1+'1');
// console.log(canteenList);

// console.log();
</script>
<style scoped lang="scss">
.classify {
	.search {
		position: sticky;
		z-index: 100;
		background-color: white;
		// top: 100rpx;
	}

	.content {
		display: flex;
		flex-direction: row;
		overflow: hidden;

		.empty {
			// background-color: red;
			.empty-c {
				width: 200rpx;
			}
		}

		.canteen-list {
			margin-top: 40rpx;
			width: 200rpx;
			position: fixed;
			align-items: center;
			justify-content: center;
			display: flex;
			flex-direction: column;
			// gap: 40rpx;

			.recommend {
				border-radius: 32rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-size: 30rpx;
				padding: 0 15rpx;
				transition: all 0.2s;
				margin-bottom:38rpx;
			}

			.list {
				.ul {
					padding: 0;
					font-size: 30rpx;
					.li {
						list-style: none;
						margin: 40rpx 0;
						text-align: center;
						padding: 5rpx 25rpx;
						border-radius: 100px;
						transition: all 0.2s;
					}
				}
			}
		}

		.food-list {
			// object-fit: cover;
			padding: 0 20rpx;
			// object-fit: fill;
			flex-grow: 1;
		}
	}
}

.active {
	background: #ff5000;
	color: #fff;
	transition: all 0.2s;
}
</style>
<style></style>
